<template>
  <!-- 外层容器，控制内边距 -->
  <div class="paper-table-wrapper">
    <!-- 查询表单区域：Inline 模式让表单组件同行排列 -->
    <el-form :inline="true" :model="searchForm" class="mb-4" style="display: flex;justify-content: space-around;">
      <el-form-item label="题目ID" style="width: 180px;">
        <!-- 双向绑定题目ID输入框 -->
        <el-input v-model="searchForm.id" placeholder="请输入题目ID" clearable />
      </el-form-item>
      <el-form-item label="年级" style="width: 180px;">
        <!-- 年级下拉选择器 -->
        <el-select v-model="searchForm.grade" placeholder="年级" clearable>
          <el-option label="一年级" value="一年级"></el-option>
          <el-option label="高三" value="高三"></el-option>
          <!-- 可扩展更多年级 -->
        </el-select>
      </el-form-item>
      <el-form-item label="学科" style="width: 180px;">
        <!-- 学科下拉选择器 -->
        <el-select v-model="searchForm.subject" placeholder="请选择" clearable>
          <el-option label="数学" value="数学"></el-option>
          <el-option label="化学" value="化学"></el-option>
          <el-option label="语文" value="语文"></el-option>
          <!-- 可扩展更多学科 -->
        </el-select>
      </el-form-item>
      <!-- 查询、添加按钮 -->
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button type="primary" class="ml-2" @click="handleAdd">添加</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格区域：展示数据，border 显示边框，stripe 斑马纹 -->
    <el-table :data="tableData" border stripe style="width: 100%" class="mb-4">
      <el-table-column prop="id" label="Id" />
      <el-table-column prop="subject" label="学科" />
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="createTime" label="创建时间" />
      <!-- 操作列：使用作用域插槽获取行数据 -->
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary"  @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger" class="ml-2" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域：绑定分页事件和数据 -->
   
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[10, 20, 30, 40]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    
  />
  </div>
</template>

<script setup lang="ts">
// 引入 Element Plus 组件（Vue3 + TS 推荐按需引入）
import { ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElButton, ElTable, ElTableColumn, ElPagination } from 'element-plus'
// 响应式数据、ref 等 Vue3 核心 API
import { reactive, ref } from 'vue'

// 搜索表单数据：响应式对象
const searchForm = reactive({
  id: '',
  grade: '',
  subject: ''
})

// 表格数据：模拟接口返回，实际可替换为 API 请求
const tableData = ref([
  { id: 66, subject: '数学（高三）', name: '高三数据任务试卷', createTime: '2024-12-25 06:54:22' },
  { id: 65, subject: '化学（一年级）', name: '12', createTime: '2024-12-25 06:53:57' },
  { id: 64, subject: '化学（一年级）', name: '12', createTime: '2024-12-25 06:53:53' },
  { id: 63, subject: '语文（高三）', name: '123', createTime: '2024-12-25 06:53:32' },
  { id: 62, subject: '化学（一年级）', name: '123', createTime: '2024-12-25 06:53:31' },
  { id: 61, subject: '化学（一年级）', name: '123', createTime: '2024-12-25 06:53:31' },
  { id: 60, subject: '化学（一年级）', name: '123', createTime: '2024-12-25 06:53:21' },
  { id: 59, subject: '化学（一年级）', name: '123', createTime: '2024-12-25 06:53:20' },
  { id: 58, subject: '化学（一年级）', name: '123', createTime: '2024-12-25 06:53:19' },
  { id: 57, subject: '化学（一年级）', name: '123', createTime: '2024-12-25 06:53:15' }
])

// 分页相关数据：当前页、每页条数、总条数
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(60)

const handleSizeChange = (val: number) => { pageSize.value = val }
const handleCurrentChange = (val: number) => { currentPage.value = val }

// 查询事件：可调用接口，根据 searchForm 过滤数据
const handleSearch = () => {
  console.log('查询条件：', searchForm)
  // 示例：实际可替换为 axios.get('/api/papers', { params: searchForm })
  // 拿到新数据后更新 tableData 和 total
}

// 添加事件：跳转添加页面或弹窗
const handleAdd = () => {
  console.log('点击添加')
  // 可跳转路由：useRouter().push('/add-paper')
}

// 编辑事件：携带行数据跳转或弹窗
const handleEdit = (row: any) => {
  console.log('编辑数据：', row)
  // 示例：useRouter().push({ path: '/edit-paper', query: { id: row.id } })
}

// 删除事件：调用接口删除，再更新表格
const handleDelete = (row: any) => {
  console.log('删除数据：', row)
  // 示例：axios.delete(`/api/papers/${row.id}`).then(() => {
  //   tableData.value = tableData.value.filter(item => item.id !== row.id)
  //   total.value--
  // })
}

// 每页条数改变：更新 pageSize 并重新请求数据

  // 调用接口重新获取数据，更新 tableData


// 当前页改变：更新 currentPage 并重新请求数据

  // 调用接口重新获取数据，更新 tableData

</script>

<style scoped>
/* 基础样式：可根据需求调整间距、颜色等 */
.paper-table-wrapper {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
/* 清除分页组件内部 li 的项目符号和默认边距 */
/* 若仍有样式问题，强制覆盖 */
::v-deep .el-pagination {
  /* 确保组件水平排列 */
  display: flex;
  align-items: center;
  gap: 8px; 
}

::v-deep .el-pagination__list {
  list-style: none !important; 
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
}


</style>